<template>
  <div class="switch-board">
    <el-container class="container">
      <!-- 头部 -->
      <el-header style="height: 120px; padding: 0px">
        <div class="m-header">
          <!-- 单个块 -->
          <div
            class="header-block"
            v-for="(item, i) in switchArr"
            :key="i"
            :class="index == item.name ? 'h-acitve' : ''"
            @click="changeIndex(i)"
          >
            <!-- 图片 -->
            <img
              :src="require('@/assets/images/exchange_' + i + '.svg')"
              alt=""
              class="header-img"
            />
            <!-- 字部分 -->
            <div>
              <div class="h-count">
                <!-- {{ item.count * Math.floor(Math.random() * 20) }} -->
                0
              </div>
              <div class="h-name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </el-header>
      <!-- 底部 -->
      <el-main class="table-main">
        <div class="app-container">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
          >
            <el-form-item label="关键字" prop="deptName">
              <el-input
                v-model="queryParams.deptName"
                placeholder="请输入部门名称"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>

          <el-table
            height="85%"
            :header-cell-style="{ background: '#F3F5FC' }"
            border
            v-if="refreshTable"
            v-loading="loading"
            :data="deptList"
            row-key="deptId"
            :default-expand-all="isExpandAll"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          >
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>

            <el-table-column type="index" label="序号" width="50" />
            <el-table-column prop="deptName" label="设备名称"></el-table-column>
            <el-table-column prop="orderNum" label="IP地址"></el-table-column>
            <el-table-column prop="orderNum" label="MAC"></el-table-column>
            <el-table-column prop="orderNum" label="物理位置"></el-table-column>
            <el-table-column prop="orderNum" label="责任人"></el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['system:dept:edit']"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 添加或修改部门对话框 -->

          <attr-dia ref="attr_dia" :tableData="tableData"></attr-dia>
          <!-- 分页器 -->
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import AttrDia from "../../../components/Dialogs/AttrDia.vue";
export default {
  components: { AttrDia },
  data() {
    return {
      index: "接入交换机", //默认选中项
      switchArr: [
        { count: 4, name: "接入交换机" },
        { count: 1, name: "全部端口" },
        { count: 2, name: "存在端口" },
        { count: 3, name: "未绑定端口" },
        { count: 4, name: "已绑定终端" },
        { count: 5, name: "未绑定终端" },
      ],
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        deptName: undefined,
        status: undefined,
      },
      // 总条数
      total: 0,
      // 重新渲染表格状态
      refreshTable: true,
      // 表格数据
      tableData: [
        {
          index: 1,
          name: "未超期",
          code: 0,
          operate: "---",
        },
        {
          index: 2,
          name: "超期",
          code: 1,
          operate: "---",
        },
        {
          index: 3,
          name: "非法占用",
          code: 0,
          operate: "---",
        },
      ],
      // 遮罩层
      loading: true,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 表格树数据
      deptList: [],
    };
  },

  methods: {
    // 更改选中项
    changeIndex(i) {
      this.index = this.switchArr[i].name;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 查询部门列表 */
    getList() {
      this.loading = true;
      this.loading = false;
      // listDept(this.queryParams).then((response) => {
      //   this.deptList = this.handleTree(response.data, "deptId");
      //   //  this.total = response.total;

      // });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.switch-board {
  height: 100%;
  .container {
    height: 100%;
    background: #EEF0F5;
    //padding: 10px;
    // 头部
    .m-header {
      position: relative;
      display: flex;
      width: 100%;
    }
    //   底部
    .table-main {
      height: 100%;
      margin-top: 10px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
    }
  }
  .app-container {
    padding: 0;
    height: 100%;
  }
}
</style>
